<template>
  <el-drawer
    class="drawer-normal"
    :visible.sync="drawer"
    title="卡券详情"
    size="60%"
    :direction="direction"
    :before-close="handleClose">
    <div class="content">
      <el-tabs type="border-card" v-model="active">
        <!-- 1:卡券信息 -->
        <el-tab-pane label="卡券信息" name="0">
          <el-descriptions class="margin-top" title="订单详情" :column="2" :size="size" border>
            <el-descriptions-item label-class-name="my-label">
              <template slot="label">
                订单号:
              </template>
              {{ vipInfo.orderId }}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label">
              <template slot="label">
                <i class="el-icon-zq-zhandiantuopu iconfont"></i>
                区域:
              </template>
              <span>{{this.formatOptions(vipInfo, this.openAreaOptions, `areaId`,'areaId','name')}}</span>
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label">
              <template slot="label">
                用户名称:
              </template>
              {{ vipInfo.userName }}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label">
              <template slot="label">
                卡券名称:
              </template>
              {{ vipInfo.vipName }}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label">
              <template slot="label">
                <i class="el-icon-zq-34 iconfont"></i>
                卡券类型:
              </template>
              <span>{{this.formatOptions(vipInfo, this.vipTypeOptions, `vipType`, `dictValue`, `dictLabel`)}}</span>
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label">
              <template slot="label">
                <i class="el-icon-zq-zhifuliushui iconfont"></i>
                订单金额：
              </template>
              {{vipInfo.orderPrice}}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label">
              <template slot="label" v-if="vipInfo.vipType==1">
                公里数值:
              </template>
              <template slot="label"  v-if="vipInfo.vipType==2">
                可使用次数:
              </template>
              <template slot="label"  v-if="vipInfo.vipType==3">
                代金券额度:
              </template>
              {{ vipInfo.vipType==1?vipInfo.miles:(vipInfo.vipType==2?vipInfo.useTime:(vipInfo.vipType==3?vipInfo.vipValue:"0.00"))}}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label">
              <template slot="label" v-if="vipInfo.vipType==1">
                剩余公里数:
              </template>
              <template slot="label"  v-if="vipInfo.vipType==2">
                剩余次数:
              </template>
              <template slot="label"  v-if="vipInfo.vipType==3">
                剩余代金券额度:
              </template>
              {{ vipInfo.vipType==1?vipInfo.usedMiles:(vipInfo.vipType==2?vipInfo.usedTime:(vipInfo.vipType==3?vipInfo.usedValue:"0.00"))}}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label">
              <template slot="label">
                <i class="el-icon-zq-34 iconfont"></i>
                卡券状态:
              </template>
              <span>{{this.formatOptions(vipInfo, this.vipStatusOptions, `vipStatus`, `dictValue`, `dictLabel`)}}</span>
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label">
              <template slot="label">
                <i class="el-icon-zq-time iconfont"></i>
                支付时间:
              </template>
              {{ vipInfo.payTime }}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label">
              <template slot="label">
                <i class="el-icon-zq-icon iconfont"></i>
                车牌号:
              </template>
              {{ vipInfo.vehiclePlate }}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label">
              <template slot="label">
                <i class="el-icon-zq-icon iconfont"></i>
                车架号:
              </template>
              {{ vipInfo.carVin }}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label">
              <template slot="label">
                <i class="el-icon-zq-zhifuzhuangtai iconfont"></i>
                支付状态：
              </template>
              {{this.formatOptions(vipInfo, this.payStatusOptions, `payStatus`, `dictValue`, `dictLabel`)}}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label">
              <template slot="label">
                <i class="el-icon-zq-zhifuleixing iconfont"></i>
                支付类型：
              </template>
              {{this.formatOptions(vipInfo, this.payTypeOptions, `payType`, `dictValue`, `dictLabel`)}}
            </el-descriptions-item>

            <el-descriptions-item label-class-name="my-label">
              <template slot="label">
                <i class="el-icon-zq-dingdanzhuangtai iconfont"></i>
                卡券状态：
              </template>
              {{this.formatOptions(vipInfo, this.vipStatusOptions, `vipStatus`, `dictValue`, `dictLabel`)}}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label">
              <template slot="label">
                <i class="el-icon-zq-zhifuleixing iconfont"></i>
                卡券来源：
              </template>
              {{this.formatOptions(vipInfo, this.sendSourceOptions, `sendSource`, `dictValue`, `dictLabel`)}}
            </el-descriptions-item>
  
          </el-descriptions>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-drawer>
</template>

<script>
import {getOrder} from "@/api/zq/vipOrder";
import {listArea} from "@/api/zq/area";
export default {
  data() {
    return {
      that: this,
      active: "0",
      drawer: false,
      direction: 'rtl',
      size: '',
      vipInfo: {},
      orderId: '',
      vipTypeOptions: [],
      payStatusOptions: [],
      vipStatusOptions: [],
      sourceOptions: [],
      sendSourceOptions: [],
      payTypeOptions: [],
      vipStatusOptions: [],
      vipOtherStatusOptions: [],
      openAreaOptions: [],
    }
  },
  created() {
    this.getDicts("vip_type").then(response => {
      this.vipTypeOptions = response.data;
    })
    this.getDicts("vip_pay_status").then(response => {
      this.payStatusOptions = response.data;
    });
    this.getDicts("vip_status").then(response => {
      this.vipStatusOptions = response.data;
    });
    this.getDicts("send_source").then(response => {
      this.sendSourceOptions = response.data;
    });
    this.getDicts("vip_pay_type").then(response => {
      this.payTypeOptions = response.data;
    });
    this.listArea();
  },
  methods: {
    handleClose() {
      this.drawer = false
    },
    getData(orderId) {
      this.drawer = true
      this.active = "0"
      this.orderId = orderId
      getOrder(orderId).then(response => {
        this.vipInfo = response.data;
      });
    },
     listArea(){
      listArea().then(response => {
        this.openAreaOptions = response.data;
      });
     }
  }
}
</script>
